<style scoped>
    .wrapper{min-height:100%;}
    .header{height:44px;background-color:#f9f9f9;}
    .back-button{background:none;border:0;}
    .back-button .fa{font-size:36px;margin-right:5px;}
    .right-button{height:44px;min-width:44px;}
</style>
<template>
    <div class="wrapper grey-e-bg">
        <header class="header flex flex-justify-between flex-align-center padding-left border-bottom" v-if="!isApp">
            <button class="back-button flex flex-align-center" v-if="showBack" @click="back">
                <i class="fa fa-angle-left grey-6" aria-hidden="true"></i>
                <span class="font-16 grey-6">{{backText}}</span>
            </button>
            <div class="title flex flex-justify-center" :style="{width:titleWidth+'px'}">
                <span class="font-18 nowrap ellipsis" v-if="showTitle">{{title}}</span>
                <slot name="title"></slot>
            </div>
            <div class="right-button">
                <slot name="right-item"></slot>
            </div>
        </header>
        <div class="page-box">
            <slot name="page"></slot>
        </div>
    </div>
</template>
<script>
    import mixins from '../mixins'
    export default {
      mixins: [mixins],
      props: {
        showBack: {
          type: [Boolean],
          default: true
        },
        backText: {
          type: [String],
          default: ''
        },
        replaceBackEvent: {// 如果为true，则点击返回不执行返回，而是回调父组件back函数
          type: [Boolean],
          default: false
        },
        title: {
          type: [String],
          default: '加载中...'
        },
        showTitle: {
          type: [Boolean],
          default: true
        },
        titleWidth: {// 标题的宽度
          type: [Number],
          default: 180
        }
      },
      data () {
        return {
          isApp: false
        }
      },
      created () {
        if (this.getCookie('isApp') === 1) {
          this.isApp = true
        }
        document.title = this.title
      },
      methods: {
        back () {
          if (this.replaceBackEvent) {
            this.$emit('back')
            return
          }
          this.$router.back()
        }
      }
    }
</script>
